﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .el-submenu__title i, .el-menu-item i {
      font-size: 18px;
      margin-right: 5px;
      color: #fff;
    }
  </style>
}
<el-card>
    <div slot="header" class="clearfix">
        <el-button size="small" plain type="danger" style="margin-left: 0px;" icon="el-icon-refresh" v-on:click="btnResetClick">
            重置用户菜单
        </el-button>
    </div>
<el-row class="tac" :gutter="20">
  <el-col :span="6">
            <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-130) + 'px' }">
                <div style="margin-right:18px;">
      
    <el-menu
      :default-openeds="defaultOpeneds"
      :default-active="defaultActive"
      :unique-opened="false"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      v-on:select="btnSideMenuClick"
      v-on:open="btnSideMenuOpen"
      v-on:close="btnSideMenuOpen">
    
      <template v-for="level1 in userMenus">
        <template v-if="level1.children && level1.children.length > 0">
    
          <el-submenu :index="level1.id">
            <template slot="title">
              <i v-if="level1.iconClass" :class="level1.iconClass"></i>
              <span>{{ level1.text }}</span>
            </template>
    
            <template v-for="level2 in level1.children">
    
              <template v-if="level2.children && level2.children.length > 0">
    
                <el-submenu :index="level2.id">
                  <template slot="title">
                    <i v-if="level2.iconClass" :class="level2.iconClass"></i>
                    <span>{{ level2.text }}</span>
                  </template>
        
                  <template v-for="level3 in level2.children">
                    <el-menu-item :class="{'is-active': getIndex(level1, level2, level3) == defaultActive}" :index="getIndex(level1, level2, level3)">
                      <i v-if="level3.iconClass" :class="level3.iconClass"></i>
                      <span>{{ level3.text }}</span>
                    </el-menu-item>
                  </template>
        
                </el-submenu>
        
              </template>
              <template v-else>
                <el-menu-item :class="{'is-active': getIndex(level1, level2) == defaultActive}" :index="getIndex(level1, level2)">
                  <i v-if="level2.iconClass" :class="level2.iconClass"></i>
                  <span>{{ level2.text }}</span>
                </el-menu-item>
              </template>
            </template>
    
          </el-submenu>
    
        </template>
        <template v-else>
          <el-menu-item :class="{'is-active': getIndex(level1) == defaultActive}" :index="getIndex(level1)">
            <i v-if="level1.iconClass" :class="level1.iconClass"></i>
            <span>{{ level1.text }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
                </div>
            </el-scrollbar>
  </el-col>
  <el-col :span="18">

    <el-card v-if="userMenu" class="box-card">
      <div slot="header" class="clearfix">
        <span>{{getCardTitle()}}</span>
      </div>
      <div class="text item">
                    <el-form v-on:submit.native.prevent ref="userMenu" :model="userMenu" :size="euiSize" label-width="160px">
          <el-form-item label="菜单标题" prop="text" :rules="{ required: true, message: '请输入菜单标题' }">
            <el-input v-model="userMenu.text"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="taxis" :rules="[
            { required: true, message: '请输入排序' },
            { validator: utils.validateInt }
          ]">
            <el-input v-model.number="userMenu.taxis"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="disabled" :rules="{ required: true, message: '请选择状态' }">
            <el-radio v-model="userMenu.disabled" :label="false">启用</el-radio>
            <el-radio v-model="userMenu.disabled" :label="true">禁用</el-radio>
          </el-form-item>
      
          <el-divider></el-divider>
          <div style="margin-top: 15px;">
                            <el-button type="primary" v-on:click="btnSubmitClick" :size="euiSize">保 存</el-button>
                            <el-button type="default" v-on:click="btnCancelClick" :size="euiSize">取 消</el-button>
          </div>
        </el-form>
      </div>
    </el-card>

  </el-col>
</el-row>
</el-card>
@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/homeMenus.js" type="text/javascript"></script> }